04. Drawer Navigator

DrawerNavigator Introduction

Drawer Navigator v1

React Navigation offers one more basic navigator to create custom navigation through React Native apps: the DrawerNavigator. While TabNavigator uses tabs to help users navigate to specific screens, DrawerNavigator uses a drawer-like menu that slides in from the side of the screen. While we won't be implementing this into UdaciFitness -- it's still important to know and fairly common in React Native applications!

To use DrawerNavigator, be sure to install version 1 of react-navigation and import the following from react-navigation:

import { DrawerNavigator } from 'react-navigation';

Luckily, many of the same philosophies shared by StackNavigator and TabNavigator apply here as well! Let's check out two basic components again and see how DrawerNavigator renders them:

const Home = ({ navigation }) => (
  <View>
    <Text>This is the Home view</Text>
    <TouchableOpacity onPress={() => navigation.navigate('DrawerOpen')}>
      <Text>Press here to open the drawer!</Text>
    </TouchableOpacity>
  </View>
);

const Dashboard = ({ navigation }) => (
  <View>
    <Text>This is the Dashboard view</Text>
    <TouchableOpacity onPress={() => navigation.navigate('DrawerOpen')}>
      <Text>Press here to open the drawer!</Text>
    </TouchableOpacity>
  </View>
);

Note that rather than routing to another component, each TouchableOpacity wrapper opens the drawer. Likewise, 'DrawerClose' can be used to close the drawer. To simplify things, React Navigation also offers 'DrawerToggle' to automatically select which navigation is appropriate based on the current drawer state.

Similar to TabNavigator and StackNavigator, we can then pass an object into DrawerNavigator, render the component returned, and we're all set!

const Drawer = DrawerNavigator({
  Home: {
    screen: Home
  },
  Dashboard: {
    screen: Dashboard
  }
});
// App.js

// ...

export default class App extends React.Component {
  render() {
    return (
      <Drawer />
    );
  }
}

Drawer Navigator v2

DrawerNavigator has been deprecated in favor of createDrawerNavigator, which is functionally identical but clearly communicates that it's a function that returns a component.

According to the documentation:

Rather than opening a drawer with navigation.navigate(‘DrawerOpen’), you can now call navigation.openDrawer(). Other methods are closeDrawer() and toggleDrawer().

What is true about the Drawer Navigator? Please select all that apply:
SOLUTION:
  • Drawer Navigator's drawer generally spans the height of the screen.
  • The component returned by `createStackNavigator` can be nested inside a Drawer Navigator.

QUIZ QUESTION::

Time for a quick review! Please match the navigator with how it manages screens:

ANSWER CHOICES:



Description

Component

Screens are rendered and placed on top of one another

Screens are switched by using a tab bar

Screens are switched by a menu that slides in from the side
SOLUTION:

Description

Component

Screens are switched by a menu that slides in from the side

Screens are switched by using a tab bar

Screens are switched by a menu that slides in from the side

Screens are rendered and placed on top of one another

Screens are switched by using a tab bar

Screens are rendered and placed on top of one another

Summary

React Navigation's Drawer Navigator is used to easily set up a screen with drawer navigation. Many of the same practices we use to set up the Stack Navigator and the Tab Navigator apply to the Drawer Navigator as well. Simply pass in an object containing the different screens, and the return value is a component ready to be rendered. As a result, this makes Drawer Navigator components easy for nesting with other navigators!

Further Research

Next Concept